<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人博客-资源</title>
  <link rel="stylesheet" href="css/resource.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/flexslider.css">
</head>
<body>
<!--头部-->
<header class="header-wrapper">
  <div class="header-content">
    <div class="middle">
      <div class="info">
        <a href=""><div class="item"><span class="icon icon-tv"></span>主页</div></a>
        <div class="item">画友</div>
        <div class="item">游戏中心</div>
        <div class="item">直播</div>
        <div class="item">周边</div>
        <div class="item">萌战</div>
      </div>


      <div class="user">
        <a style=" color: #222;" href="#"><div class="item">用户</div></a>
        <div class="item">消息</div>
        <div class="item">动态</div>
        <div class="item">收藏夹</div>
        <div class="item">历史</div>
        <div class="item">投稿</div>
        <a style=" color: #222;" href=""><div class="item">退出</div></a>
      </div>

      <div class="user">
        <a href=""><div class="item">登录</div></a>
        <a href=""><div class="item">注册</div></a>
      </div>

    </div>
  </div>
  <div class="header-bg">
    <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
  </div>
</header>
<!--导航-->
<div class="tab">
  <div class="tab-item">
    <span class="fa fa-home fa-2x"></span>
    <a href="index.html">主页</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="tea.html">茶会</a>
  </div>
  <div class="tab-item">
    <span class="num">5z</span>
    <a href="book.html">本子</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="video.html">视频</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="music.html">音乐</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="rescource.html">资源</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="">小组</a>
  </div>
</div>

<!--内容-->
<div class="content">
  <div class="music-banner">
    <img src="images/forum_header50.jpg" alt="" width="100%">
  </div>

  <!--顶部-->
  <div class="resource-banner clearfix">
    <ul>
      <li class="banner-item">
        <div class="item-image">
          <img src="images/avatar.png" alt="" width="100%" height="100%">
          <div class="tag">激情</div>
        </div>
        <div class="item-desc">
          sadsadssadas
        </div>
      </li>
      <li class="banner-item">
        <div class="item-image">
          <img src="images/avatar.png" alt="" width="100%" height="100%">
          <div class="tag">激情</div>
        </div>
        <div class="item-desc">
          sadsadssadas
        </div>
      </li>
      <li class="banner-item">
        <div class="item-image">
          <img src="images/avatar.png" alt="" width="100%" height="100%">
          <div class="tag">激情</div>
        </div>
        <div class="item-desc">
          sadsadssadas
        </div>
      </li>
      <li class="banner-item">
        <div class="item-image">
          <img src="images/avatar.png" alt="" width="100%" height="100%">
          <div class="tag">激情</div>
        </div>
        <div class="item-desc">
          sadsadssadas
        </div>
      </li>
      <li class="banner-item">
        <div class="item-image">
          <img src="images/avatar.png" alt="" width="100%" height="100%">
          <div class="tag">激情</div>
        </div>
        <div class="item-desc">
          sadsadssadas
        </div>
      </li>
      <li class="banner-item">
        <div class="item-image">
          <img src="images/avatar.png" alt="" width="100%" height="100%">
          <div class="tag">激情</div>
        </div>
        <div class="item-desc">
          sadsadssadas
        </div>
      </li>
    </ul>
  </div>

  <div class="resource-wrap clearfix">
    <div class="resource-left">
      <div class="category">
        <h3>分类目录</h3>
        <ul>
          <li>
            <span class="fa fa-angle-right icon"></span>
            <a href="?tag=" class="@if($tag == '') active @endif"><span>全部</span></a>
          </li>
          <li>
            <span class="fa fa-angle-right icon"></span>
            <a href="?tag=软件" class="@if($tag == '软件') active @endif"><span>软件</span></a>
          </li>
          <li>
            <span class="fa fa-angle-right icon"></span>
            <a href="?tag=生肉" class="@if($tag == '生肉') active @endif"><span>生肉</span></a>
          </li>
          <li>
            <span class="fa fa-angle-right icon"></span>
            <a href="?tag=游戏" class="@if($tag == '游戏') active @endif"><span>游戏</span></a>
          </li>
          <li>
            <span class="fa fa-angle-right icon"></span>
            <a href="?tag=教程" class="@if($tag == '教程') active @endif"><span>教程</span></a>
          </li>
          <li>
            <span class="fa fa-angle-right icon"></span>
            <a href="?tag=其他" class="@if($tag == '其他') active @endif"><span>其他</span></a>
          </li>
        </ul>
      </div>
    </div>

    <div class="resource-main">

      <div class="resource-box flexslider">
        <ul class="slides">

          <li class="resource-box-item" >
            <img src="images/5.jpg" alt="">
          </li>

          <li class="resource-box-item" >
            <img src="images/6.jpg" alt="">
          </li>

          <li class="resource-box-item" >
            <img src="images/7.jpg" alt="">
          </li>

          <li class="resource-box-item" >
            <img src="images/8.jpg" alt="">
          </li>

        </ul>
      </div>


      <div class="resource-item-wrap clearfix">
        <div class="resource-thumbnail">
          <a href="book_detail.html"><img src="images/10.jpg" alt=""></a>
        </div>

        <div class="resource-info clearfix">
          <div class="resource-mxh">
            <h3 class="resource-title">{{$item->title}}</h3>
            <div class="resource-desc">{{$item->content}}</div>
          </div>
          <div class="resource-foot clearfix">
            <ul>
              <li>
                <span class="fa fa-database"></span>
                <span>asdsa</span>
              </li>
              <li>
                <span class="fa fa-eye"></span>
                <span>333</span>
              </li>
              <li>
                <span class="fa fa-commenting"></span>
                <span>22</span>
              </li>

              <li>
                <a href="book_detail.html"><span>阅读全文</span></a>
              </li>
            </ul>
          </div>
        </div>

      </div>




    </div>

    <div class="resource-right">
      <div class="new-resource">
        <h3>最新目录</h3>
        <ul>

          <li class="clearfix">
            <div class="img"><img src="images/1.jpg" alt="" width="100%" height="100%"></div>
            <a href="book_detail.html"><div class="new-resource-desc">
              {{$new->title}}
            </div></a>
          </li>

        </ul>
      </div>
    </div>
  </div>
</div>

</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script>
  $(function() {
    $('.resource-box').flexslider({
      animation: "slide"
    })
  })

</script>
</html>